<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <Mheader></Mheader>
      <Masider></Masider>
    </div>

    <script>
    const bus  = new Vue();
    const Mheader = {
      template : '<header> 头部：：： {{ num }}</header>',
      data() {
        return {
          num:0
        }
      },
      created () {
        bus.$on('add',(val)=>{
          this.num += val
        })
      }
    }
    
    Vue.component('Masider',{
      data() {
        return {
          msg: 'masider'
        }
      },
      methods: {
        addcart(){
          bus.$emit('add',1)
        }
      },
      template: '<Button @click="addcart">按钮添加</Button>'
    })
    
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          count: 1
        }
      },
      components: {
        Mheader
      }
    })
    
    </script>
  </body>
</html>